<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>excel导入</title>
    #include("/common/include/include.html")
</head>
<body>
<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">用户批量导入</h3>
    </div>
    <div class="panel-body">

        <!--Dropzonejs using Bootstrap theme-->
        <!--===================================================-->
        <p>请点击<A style="color: red" HREF="#(ctx)/common/excel/excel_template.xlsx" TARGET="_blank">下载</A>用户导入Excel模板！</p>

        <div class="bord-top pad-ver">
            <!-- The fileinput-button span is used to style the file input field as button -->
            <span class="btn btn-success fileinput-button dz-clickable">
					                <i class="fa fa-plus"></i>
					                <span>选择文件...</span>
					            </span>

            <div class="btn-group pull-right">
                <button id="dz-upload-btn" class="btn btn-primary" type="submit" disabled>
                    <i class="fa fa-upload-cloud"></i> 上传
                </button>
                <button id="dz-remove-btn" class="btn btn-danger cancel" type="reset" disabled>
                    <i class="demo-pli-cross"></i>
                </button>
            </div>
        </div>


        <div id="dz-previews">
            <div id="dz-template" class="pad-top bord-top">
                <div class="media">
                    <div class="media-body">
                        <!--This is used as the file preview template-->
                        <div class="media-block">
                            <div class="media-left">
                                <img class="dz-img" data-dz-thumbnail>
                            </div>
                            <div class="media-body">
                                <p class="text-main text-bold mar-no text-overflow" data-dz-name></p>
                                <span class="dz-error text-danger text-sm" data-dz-errormessage></span>
                                <p class="text-sm" data-dz-size></p>
                                <div id="dz-total-progress" style="opacity:0">
                                    <div class="progress progress-xs active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="media-right">
                        <button data-dz-remove class="btn btn-xs btn-danger dz-cancel"><i class="demo-pli-cross"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <!--===================================================-->
        <!--End Dropzonejs using Bootstrap theme-->


    </div>
</div>
<script>
$(document).ready(function() {

// DROPZONE.JS
// =================================================================
// Require Dropzone
// http://www.dropzonejs.com/
// =================================================================
Dropzone.options.demoDropzone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
//uploadMultiple: true,
//parallelUploads: 25,
//maxFiles: 25,

// The setting up of the dropzone
init: function() {
var myDropzone = this;
//  Here's the change from enyo's tutorial...
//  $("#submit-all").click(function (e) {
//  e.preventDefault();
//  e.stopPropagation();
//  myDropzone.processQueue();
//
//}
//    );

}

}



// DROPZONE.JS WITH BOOTSTRAP'S THEME
// =================================================================
// Require Dropzone
// http://www.dropzonejs.com/
// =================================================================
// Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
var previewNode = document.querySelector("#dz-template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

var uplodaBtn = $('#dz-upload-btn');
var removeBtn = $('#dz-remove-btn');
var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
url: "#(ctx)/admin/user/importExcelUpload", // Set the url
thumbnailWidth: 50,
    createImageThumbnails: false,
thumbnailHeight: 50,
parallelUploads: 20,
previewTemplate: previewTemplate,
autoQueue: false, // Make sure the files aren't queued until manually added
previewsContainer: "#dz-previews", // Define the container to display the previews
clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
    success:function(file) {
    alert("用户导入成功！");
        if (file.previewElement) {
            return file.previewElement.classList.add("dz-success");
        }
    }
});


myDropzone.on("addedfile", function(file) {
// Hookup the button
uplodaBtn.prop('disabled', false);
removeBtn.prop('disabled', false);
});

// Update the total progress bar
myDropzone.on("totaluploadprogress", function(progress) {
$("#dz-total-progress .progress-bar").css({'width' : progress + "%"});
});

myDropzone.on("sending", function(file) {
// Show the total progress bar when upload starts
document.querySelector("#dz-total-progress").style.opacity = "1";
});

// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("queuecomplete", function(progress) {
document.querySelector("#dz-total-progress").style.opacity = "0";
});


// Setup the buttons for all transfers
uplodaBtn.on('click', function() {
//Upload all file
myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));

});

removeBtn.on('click', function() {
myDropzone.removeAllFiles(true);
uplodaBtn.prop('disabled', true);
removeBtn.prop('disabled', true);
});

});

</script>
</body>
</html>